<script setup lang="ts">
import IndicatorModal from './components/IndicatorsModal/index.vue'
import MaintainAssociationModal from './components/MaintainAssociationModal/index.vue'
import OperateModal from './components/OperateModal/index.vue'
import DetailsModal from './components/DetailsModal/index.vue'
import { Edit, Delete, View, CopyDocument } from '@element-plus/icons-vue'
import { useTableData, defaults, type GatewayInfo } from './composable'

const maintainAssociationModalRef = ref<InstanceType<typeof MaintainAssociationModal>>()
const [gatewayId, setGatewayId] = useState('')

const {
  loading,
  tableData,
  columns,
  getLists,
  del,
  getStatisticalData,
  downloadExcel,
  totalGatewayNumber,
  totalIndicatorNumber,
  totalToolsNumber,
  pagination,
} = useTableData(async (row) => {
  setGatewayId(row.id)
  await nextTick()
  maintainAssociationModalRef.value?.open()
}, async (row) => {
  info.value = { ...row }
  await nextTick()
  indicatorModalRef.value?.open()
})

const detailsModalRef = ref<InstanceType<typeof DetailsModal>>()
const operateModalRef = ref<InstanceType<typeof OperateModal>>()
const indicatorModalRef = ref<InstanceType<typeof IndicatorModal>>()
const info = ref<GatewayInfo>({
  ...defaults,
})

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  getTableData()
  getStatisticalData()
}
async function clickAdd() {
  info.value = {
    ...defaults,
  }
  await nextTick()
  operateModalRef.value?.open()
}
async function clickRowView(row: GatewayInfo) {
  info.value = { ...row }
  await nextTick()
  detailsModalRef.value?.open()
}
async function clickRowEdit(row: GatewayInfo) {
  info.value = { ...row }
  await nextTick()
  operateModalRef.value?.open()
}
async function clickRowDelete(row: GatewayInfo) {
  if (row.id) {
    const res = await del(row.id)
    if (res) {
      getTableData()
      getStatisticalData()
    }
  }
}
async function clickRowCopy(row: GatewayInfo) {
  const { id, ...rest } = row
  info.value = { ...rest }
  await nextTick()
  operateModalRef.value?.open()
}

function getTableData() {
  const params = {
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
  }
  getLists(params)
}

function downloadHandler() {
  downloadExcel()
}

function successHandler() {
  getTableData()
  getStatisticalData()
}

onMounted(() => {
  clickSearch()
})
</script>

<template>
  <div class="padding-sm flex flex-col container">
    <TableLists
      :lists="tableData" :loading="loading"
      :columns="columns" show-toolbox
      :operate-width="200"
      custom-download
      @download="downloadHandler"
    >
      <template #actions>
        <div class="w-full flex items-center">
          <div class="fs-14 mr-4 flex items-center">
            <span>网关数量: {{ totalGatewayNumber }} </span>
            <span class="ml-3">计量器具数量: {{ totalToolsNumber }} </span>
            <span class="ml-3">测点数量: {{ totalIndicatorNumber }}</span>
          </div>
          <SearchButton @click="clickSearch" />
          <AddButton @click="clickAdd" />
        </div>
      </template>
      <template #operate="{ row }">
        <TdButton title="查看" :icon="View" type="primary" @click="clickRowView(row)" />
        <TdButton title="编辑" :icon="Edit" type="warning" @click="clickRowEdit(row)" />
        <TdButton title="删除" :icon="Delete" type="danger" @click="clickRowDelete(row)" />
        <TdButton title="复制" :icon="CopyDocument" type="success" @click="clickRowCopy(row)" />
      </template>
    </TableLists>
    <ListsPagination
      v-model:page-num="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @change="getTableData"
    />

    <!-- 维护关联计量器具 -->
    <MaintainAssociationModal v-if="gatewayId" ref="maintainAssociationModalRef" :pid="gatewayId" @refresh-on-closed="successHandler" />

    <!-- 网关信息 -->
    <OperateModal ref="operateModalRef" v-model="info" @save-success="successHandler" />
    <DetailsModal ref="detailsModalRef" :info="info" />

    <!-- 查看关联测点 -->
    <IndicatorModal ref="indicatorModalRef" :info="info" />
  </div>
</template>
